<template>
	<view class="content">
		<view class="toopp_a"></view>
		<view class="biaodan">
			<view class="biaodan_a">
				<p class="biaodan_top">
					<span>*</span>
					店铺名称
				</p>
				<input type="text" v-model="title" placeholder="请输入店铺名称"    class="inputStyle" />
			</view>
			<view class="biaodan_a" @click="opnMap">
				<p class="biaodan_top">
					<span>*</span>
					店铺地址
				</p>
				<input type="text" v-model="site" placeholder="请输入店铺地址"    class="inputStyle" disabled />
			</view>
			<view class="biaodan_a">
				<p class="biaodan_top">
					<span>*</span>
					商家负责人姓名
				</p>
				<input type="text" v-model="name"    class="inputStyle" placeholder="请输商家负责人姓名" />
			</view>
			<view class="biaodan_a bomm">
				<p class="biaodan_top">
					<span>*</span>
					商家负责人联系电话
				</p>
				<input type="number" v-model="phone"    class="inputStyle" placeholder="请输入商家负责人联系电话" />
			</view>
		</view>
		<view class="shangchuang">
			<p class="shangchuang_a_top">
				<span>*</span>
				店铺头像
			</p>
			<u-upload :action="action" :file-list="fileList" max-count="1" width="165" height="165" @on-success="success1"></u-upload>
		</view>

		<view class="shangchuang" style="height: 90rpx; padding: 20rpx 0;">
			<u-radio-group v-model="value">
				<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
					{{ item.name }}
				</u-radio>
			</u-radio-group>
		</view>

		<view class="shangchuang">
			<p class="shangchuang_a_top">
				<span>*</span>
				法人身份证正面
			</p>
			<u-upload :action="action" :file-list="fileList1" max-count="1" width="165" height="165" @on-success="success2" @on-remove="onRemove" ref="uUpload"></u-upload>
		</view>
		<view class="shangchuang">
			<p class="shangchuang_a_top">
				<span>*</span>
				法人身份证反面
			</p>
			<u-upload :action="action" max-count="1" :file-list="fileList2" width="165" height="165" @on-success="success22" @on-remove="onRemove" ref="uUpload"></u-upload>
		</view>
		<view class="shangchuang_b shadow" style="margin-bottom: 200rpx;">
			<p class="shangchuang_b_top">
				<span>*</span>
				营业执照
			</p>
			<u-upload :action="action" :file-list="fileList3" max-count="1" width="165" height="165" @on-success="success3" @on-remove="onRemove" ref="uUpload"></u-upload>
		</view>

		<view class="tijiao_yangshi" @click="btnpull"><view class="btnpull">确认内容并提交</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			action: 'https://wumei.qianjitianxia.com/api/upload/upload',
			title: '', //店铺名称
			site: '', //店铺地址
			name: '', //商家负责人姓名
			phone: '', //商家负责人联系电话
			type: '', //1企业认证、2个人认证
			photo: [], //店铺头像
			card_just: [], // 身份证正面照片
			card_turn: [], // 身份证反面照片
			business: [], // 执照

			list: [
				{
					name: '企业认证',
					disabled: false,
				},
				{
					name: '个人认证',
					disabled: false,
				},
			],
			value: '企业认证',
			fileList: [],
			fileList1: [],
			fileList2: [],
			fileList3: [],
		};
	},
	onLoad() {
		this.getShop();
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ff0000',
			animation: {
				duration: 400,
				timingFunc: 'easeIn',
			},
		});
	},
	methods: {
		async opnMap() {
			const [, { name, address, longitude, latitude }] = await uni.chooseLocation();
			this.site = address;
			console.log('位置名称：' + name);
			console.log('详细地址：' + address);
			console.log('经度：' + longitude);
			console.log('纬度：' + latitude);
		},
		radioChange(e) {
			if (e === '企业认证') {
				this.type = '1';
			} else if (e === '个人认证') {
				this.type = '2';
			}
			console.log(this.type);
		},
		success1(index, lists) {
			console.log('list: ', lists);
			console.log('list: ', index);
			this.photo.push(index.url);
		},
		success2(index, lists) {
			console.log('list: ', lists);
			console.log('list: ', index);
			this.card_just.push(index.url);
		},
		success22(index, lists) {
			console.log('list: ', lists);
			console.log('list: ', index);
			this.card_turn.push(index.url);
		},
		success3(index, lists) {
			console.log('list: ', lists);
			console.log('list: ', index);
			this.business.push(index.url);
		},
		onRemove(index, lists) {
			console.log('图片已被移除');
		},
		click(index) {
			console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`);
		},
		// 获取入驻店铺资料
		async getShop() {
			let obj = {
				uid: uni.getStorageSync('uid'),
			};
			const res = await this.$u.post('api/shop/shop_select', obj, {});
			if (!res.code) return uni.$showMsg();

			console.log('获取入驻店铺资料 >>  ', res);
			this.title = res.data.title;
			this.name = res.data.name;
			this.site = res.data.site;
			this.phone = res.data.phone;
	/* 		this.photo = [ res.data.photo];
			this.card_just = [ res.data.card_just];
			this.card_turn = [ res.data.card_turn];
			this.business = [ res.data.business];
			this.fileList = [
				{
					url: res.data.photo,
				}
			];
			this.fileList1 = [
				{
					url: res.data.card_just,
				}
			];
			this.fileList2 = [
				{
					url: res.data.card_turn,
				}
			];
			this.fileList3 = [
				{
					url: res.data.business,
				}
			]; */
		},

		async btnpull() {
			if (!this.title) return uni.$showMsg('请填写店铺名称');
			if (!this.site) return uni.$showMsg('请填写店铺地址');
			if (!this.name) return uni.$showMsg('请填写商家负责人姓名');
			if (!this.phone) return uni.$showMsg('请商家负责人联系电话');
			if (!this.type) return uni.$showMsg('请选择认证项');
			if (this.photo.length < 1) return uni.$showMsg('请上传店铺头像');
			if (this.card_just.length < 1) return uni.$showMsg('请上传身份证正面照');
			if (this.card_turn.length < 1) return uni.$showMsg('请上传身份证反面照');
			if (this.business.length < 1) return uni.$showMsg('请上传营业执照');

			let obj = {
				uid: uni.getStorageSync('uid'),
				// uid:1
				title: this.title,
				site: this.site,
				name: this.name,
				phone: this.phone,
				type: this.type,
				photo: this.photo,
				card_just: this.card_just,
				card_turn: this.card_turn,
				business: this.business,
			};
			const result = await this.$u.post('api/shop/shop_add', obj, {});
			console.log('result: 店铺入驻申请，参数返回', result);
			if (result.code === 1) {
				uni.$showMsg(result.msg);
				setTimeout(() => {
					uni.switchTab(
						{
							url: '../Home_a',
						},
						500,
					);
				});
			} else {
				uni.$showMsg(result.msg);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
input {
	padding-left: 10rpx;
}

.inputStyle {
				font-size: 30rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 10rpx;
			}
/deep/.u-icon__icon {
	//display: flex !important;
	//align-items: center !important;
	top: -4rpx !important;
}
/deep/ .u-radio {
	margin-left: 20rpx;
}
.content {
	width: 100%;
	height: 100%;
	background-color: #f5f8fd;
}
.toopp_a {
	width: 100%;
	height: 20rpx;
}

.biaodan {
	width: 690rpx;
	margin: auto;
	height: 100%;
	background-color: #ffffff;
	border-radius: 10rpx;
	.biaodan_a {
		width: 630rpx;
		margin: auto;
		height: 132rpx;
		border-bottom: 1rpx solid #999999;
		.biaodan_top {
			font-size: 36rpx;
			padding-top: 20rpx;
			span {
				color: #ff0000;
			}
		}
		input {
			font-size: 30rpx;
		}
		.biaodan_cen {
			color: #999999;
			font-size: 30rpx;
			margin-top: 15rpx;
		}
	}
	.bomm {
		margin-bottom: 20rpx;
	}
}

.shangchuang {
	width: 690rpx;
	margin: auto;
	height: 260rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	margin-top: 20rpx;
	.shangchuang_a_top {
		width: 300rpx;
		height: 75rpx;
		line-height: 75rpx;
		margin-left: 20rpx;
		span {
			color: #ff0000;
		}
	}
	.u-list-item {
		margin-left: 20rpx;
	}
}
/deep/ .u-upload {
	padding-left: 20rpx !important;
}
.shangchuang_b {
	width: 690rpx;
	margin: auto;
	height: 260rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	margin-top: 20rpx;
	margin-bottom: 150rpx;
	.shangchuang_b_top {
		width: 300rpx;
		height: 75rpx;
		line-height: 75rpx;
		margin-left: 20rpx;
		span {
			color: #ff0000;
		}
	}
}

.tijiao_yangshi {
	width: 100%;
	height: 140rpx;
	position: fixed;
	background-color: #ffffff;
	bottom: 0rpx;
	z-index: 999;
	.btnpull {
		width: 690rpx;
		margin: auto;
		height: 100rpx;
		background-color: #ff1a14;
		border-radius: 50rpx;
		margin-top: 20rpx;
		color: #ffffff;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
	}
}
</style>
